<template>
    <div class="playPageFoot">
        <div class="jindu" v-if="detail">
            <span>00:00</span>
            <van-slider v-model="value"/>
            <span style=" opacity: 0.6">{{audioTime}}</span>
        </div>
        <div class="caozuo">
            <div class="palyStateIcon" @click="changePlayMode">
                <i :class="playMode"></i>
            </div>
            <i class="iconfont icon-shangyishou"></i>
            <div class="stop" @click="changeStop">
                <i :class="playStop"></i>
            </div>
            <i class="iconfont icon-shangyishou-copy"></i>
            <i class="iconfont icon-gengduo1"></i>
        </div>
        <audio ref="audio" :src="musicId" autoplay></audio>
    </div>
</template>

<script>
import {playMode} from "@/assets/js/config.js";
import util from "@/assets/js/util.js";
export default {
    data() {
        return {
            isStop:true,
            stopPlayState:"paused",
            value:0,
            audioTime:""
        }
    },
    props:["detail","musicId"],
    methods: {
        changeStop(){
            this.isStop=!this.isStop;
            this.$store.commit("changeStopPlay",this.isStop);
            if(this.isStop){
                this.stopPlayState = "running";
                this.$store.commit("changeStopPlayState",this.stopPlayState);
                this.$refs.audio.play()
            }else{
                this.stopPlayState = "paused";
                this.$store.commit("changeStopPlayState",this.stopPlayState);
                this.$refs.audio.pause()
            }
        },
        changePlayMode(){
            
        }
    },
    computed: {
        playMode(){
            return this.$store.state.mode===playMode.sequence?"iconfont2 icon-liebiaoxunhuan":this.$store.state.mode===playMode.loop?"iconfont2 icon-danquxunhuan":"iconfont2 icon-suijibofang"
        },
        playStop(){
            return this.isStop?"iconfont2 icon-zanting1":"iconfont2 icon-zanting"
        } ,
        changeTime(){
            return util.toHHmmss(this.detail.songs[0].publishTime)
        }
    },
    mounted() {
        let theAudio =  this.$refs.audio;
        let that = this
        let secondsToTime = function( secs ){
            var hoursDiv = secs / 3600, hours = Math.floor( hoursDiv ), minutesDiv = secs % 3600 / 60, minutes = Math.floor( minutesDiv ), seconds = Math.ceil( secs % 3600 % 60 );
            if( seconds > 59 ) { seconds = 0; minutes = Math.ceil( minutesDiv ); }
            if( minutes > 59 ) { minutes = 0; hours = Math.ceil( hoursDiv ); }
            return ( hours == 0 ? '' : hours > 0 && hours.toString().length < 2 ? '0'+hours+':' : hours+':' ) + ( minutes.toString().length < 2 ? '0'+minutes : minutes ) + ':' + ( seconds.toString().length < 2 ? '0'+seconds : seconds );
        }
        var interval = setInterval(function(){ 
            // debugger;
            // if( theAudio.buffered.length < 1 ) return true;
            // barLoaded.width( ( theAudio.buffered.end( 0 ) / theAudio.duration ) * 100 + '%' );
            // if( Math.floor( theAudio.buffered.end( 0 ) ) >= Math.floor( theAudio.duration ) ) 
            console.log(secondsToTime(parseInt(theAudio.duration)));
            that.audioTime = secondsToTime(parseInt(theAudio.duration))
            clearInterval( interval );
        }, 1000 );

       
    }
}
</script>

<style lang="scss" scoped>
    @import "~@/assets/css/common.scss";
    .playPageFoot{
      padding: vw(16) vw(30) 0;
      width: 100%;
      .jindu{
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: white;
          font-size: vw(12);
          transform: rotate3d(0,0,0,0);
      }
      .caozuo{
        padding: vw(20);
        display: flex;
        justify-content: space-between;
        align-items: center;
        i{
            font-size: vw(20);
            color: white;
        }
        .stop{
            width: vw(40);
            height: vw(40);
            border: 1px solid white;
            border-radius: 50%;
            text-align: center;
            line-height: vw(40);
        }
      }
    }
</style>